<template>
  <div class="header">
    <div class="header_inner">
      <div class="logo">
        <img src="@/static/logo1.png" alt class="img" />
      </div>

      <div class="main_nav">
        <nuxt-link
          class="main_nav_item"
          v-for="(item,index) in homeTitle"
          :key="index"
          :to="item.path ||''"
        >{{item.title}}</nuxt-link>
      </div>

      <div>
        <!-- 已登录 -->
        <div class="logging logLink" v-if="$store.state.user.userInfo.token">
          <el-dropdown>
            <div class="user_info">
              <img
                v-if="$store.state.user.userInfo.user.defaultAvatar"
                :src="$axios.defaults.baseURL + $store.state.user.userInfo.user.defaultAvatar"
                alt
                class="img"
              />
              <img v-else src="@/static/logo.jpg" alt class="img" />

              <span class="el-dropdown-link">
                {{ $store.state.user.userInfo.user.nickname }}
                <i class="el-icon-caret-bottom"></i>
              </span>
            </div>

            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item>
                <div @click="logOut">退出</div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>

        <!-- 未登录 -->
        <div class="notlog logLink" @click="login" v-else>
          <div class="iconfont icon-denglu"></div>
          <span>登录 | 注册</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      homeTitle: [
        {
          title: "首页",
          path: "/"
        },
        {
          title: "旅游攻略",
          path: "/post"
        },
        {
          title: "酒店",
          path: "/hotel"
        },
        {
          title: "国内机票",
          path: "/air"
        }
      ]
    };
  },

  methods: {
    login() {
      this.$router.push("/user/login");
    },

    logOut() {
      

      this.$confirm("您确定要退出吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$message({
          type: "success",
          message: "退出成功"
        });

        this.$store.commit("user/setUserInfo", {});

        this.$router.push("/");
      });
    }
  }
};
</script>

<style lang="less" scoped>
.header {
  display: flex;
  height: 70px;
  width: 100%;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
  background: linear-gradient(90deg, #00d0d4 19%, #00c5c3 58%, #9effa4 100%);

  &_inner {
    width: 960px;
    height: 70px;
    margin: 0 auto;
    display: flex;
    align-items: center;

    .logo {
      margin: 0px 30px;
      height: 70px;
      width: 160px;

      .img {
        height: 100%;
        width: 100%;
        object-fit: contain;
        cursor: pointer;
      }
    }

    .main_nav {
      flex: 1;
      display: flex;

      &_item {
        padding: 0 20px;
        height: 70px;
        line-height: 70px;
        font-weight: 700;
        font-size: 20px;
        color: #fff;

        &:hover {
          background: #00bcd4;
          box-sizing: border-box;
        }
      }

      .nuxt-link-exact-active {
        background: #00bcd4;
        color: #fff !important;
      }
    }

    .notlog {
      display: flex;
      align-items: center;
      color: #333;

      &:hover {
        color: #fff;
        cursor: pointer;
      }

      .icon-denglu {
        font-size: 20px;
      }

      span {
        font-size: 14px;
        margin: -2px 0 0 6px;
      }
    }

    .logLink {
      cursor: pointer;
    }
  }

  .el-dropdown {
    .user_info {
      display: flex;
      align-items: center;

      .img {
        width: 40px;
        height: 40px;
        object-fit: cover;
        border-radius: 50%;
      }
    }

    .el-dropdown-link {
      margin-left: 10px;
    }
  }
}

.header .main_nav .nuxt-link-active:not(:first-child) {
    background:  #00bcd4;
    color: #fff!important;
}
</style>